import React, {useEffect, useImperativeHandle, useState} from "react";
import {Button, Form, Spin} from "antd";
import styles from "./index.module.scss";
import ConfigItem from "@/pages/ThemeConfig/ConfigItem";
import {apiGetSiteConfig} from "@/common/apis/setting-api";
import _ from "lodash";

interface ThemeConfigProps {
  themeRef: any;
}

const ThemeConfig: React.FC<ThemeConfigProps> = (props) => {

  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false)
  const [configData, setConfigData] = useState({})

  useEffect(() => {
    setLoading(true)
    apiGetSiteConfig().then(res => {
      setConfigData(res.data)
    }).finally(() => setLoading(false))
  }, [form])

  useEffect(() => {
    if (configData) {
      form.setFieldsValue(configData);
    }
  }, [form, configData]);

  return (
    <Spin spinning={loading}>
      <Form form={form}>
        <div className={styles.container}>
          <div className={styles.item}>
            <div className={styles.titleSpan}>系统菜单LOGO</div>
            <div className={styles.content}>
              <Form.Item noStyle name="menu_rectangle_logo">
                <ConfigItem
                  name="menu_rectangle_logo"
                  title={"上传矩形LOGO"}
                  type="image"
                  crop
                />
              </Form.Item>
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.titleSpan}>浏览器表头LOGO</div>
            <div className={styles.content}>
              <Form.Item noStyle name="browserLogo">
                <ConfigItem
                  name="browserLogo"
                  title={"替换方形LOGO"}
                  type="image"
                  accept={".ico"}
                />
              </Form.Item>
              <Form.Item noStyle name="browserText">
                <ConfigItem name="browserText" title={"替换文字"}/>
              </Form.Item>
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.titleSpan}>登录页面LOGO</div>
            <div className={styles.content}>
              <Form.Item noStyle name="login_logo">
                <ConfigItem
                  name="login_logo"
                  title={"上传LOGO"}
                  type="image"
                  crop
                />
              </Form.Item>
              <Form.Item noStyle name="login_browser_text">
                <ConfigItem
                  name="login_browser_text"
                  title={"登录页表头文字"}
                />
              </Form.Item>
              <Form.Item noStyle name="login_text_1">
                <ConfigItem name="login_text_1" title={"登录页文案1"} maxLength={10}/>
              </Form.Item>
              <Form.Item noStyle name="login_text_2">
                <ConfigItem
                  name="login_text_2"
                  title={"登录页文案2"}
                  maxLength={10}
                />
              </Form.Item>
              <Form.Item noStyle name="login_text_3">
                <ConfigItem
                  name="login_text_3"
                  title={"登录页文案3"}
                  maxLength={20}
                />
              </Form.Item>
              <Form.Item noStyle name="login_describe_text">
                <ConfigItem
                  name="login_describe_text"
                  title={"登录页备案"}
                  maxLength={50}
                />
              </Form.Item>
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.titleSpan}>大屏标题文字</div>
            <div className={styles.content}>
              {/*{_.map(taskTypes, (item) => (
                <Form.Item
                  key={item.code}
                  noStyle
                  name={`monitor_${item.code}_text`}
                >
                  <ConfigItem
                    name={`monitor_${item.code}_text`}
                    title={`${item.name}违法大屏`}
                    maxLength={13}
                  />
                </Form.Item>
              ))}*/}
            </div>
          </div>
        </div>
      </Form>
    </Spin>
  );
}

export default ThemeConfig;
